<template>
  <el-card>
    <div class="all-content-echart" v-show="this.showPage">
      <!--    <div class="all-content-echart">-->
      <div ref="diskCheck" class="left"/>
      <div class="right">
        <div class="top">
          <div style="float:left">
            <!--          <el-row><span class="bold">磁盘名称：</span>{{this.diskInfo.diskName}}</el-row>-->
            <el-row><span class="bold">磁盘总空间：</span>{{this.diskInfo.totalSpace}}{{this.diskInfo.diskUnit}}</el-row>
            <el-row><span class="bold">磁盘空闲空间：</span>{{this.diskInfo.freeSpace}}{{this.diskInfo.diskUnit}}</el-row>
            <el-row><span class="bold">磁盘使用空间：</span>{{this.diskInfo.usedSpace}}{{this.diskInfo.diskUnit}}</el-row>
            <el-row><span class="bold">磁盘使用率：</span>{{this.diskInfo.sourceRate}} %</el-row>
          </div>
          <div style="float:right">
            <el-row><span class="bold">转存磁盘总空间：</span>{{this.diskInfo.overTotalSpace}}{{this.diskInfo.diskUnit}}</el-row>
            <el-row><span class="bold">转存磁盘空闲空间：</span>{{this.diskInfo.overFreeSpace}}{{this.diskInfo.diskUnit}}</el-row>
            <el-row><span class="bold">转存磁盘使用空间：</span>{{this.diskInfo.overUsedSpace}}{{this.diskInfo.diskUnit}}</el-row>
            <el-row><span class="bold">转存磁盘使用率：</span>{{this.diskInfo.overSourceRate}} %</el-row>
          </div>
        </div>
        <div class="bottom">
          <el-row>
            <el-form ref="setAlarmForm" label-width="150px" :model="storeAlarm">
              <el-form-item style="font-weight: bold;" label="将满告警阈值(%)" :disabled="isFirstPage">
                <el-input style="width: 100px" v-model="storeAlarm"
                          :disabled="permissions!= null && permissions.indexOf('sys_diskcheck_add') <= -1 || isFirstPage"/>
                <el-button @click="setLogSpaceSettings(3)" type="primary" v-show="!isFirstPage"
                           v-if="permissions!= null && permissions.indexOf('sys_diskcheck_add') > -1">设置
                </el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row>
            <el-form ref="setSpaceForm" label-width="150px" :model="fullSpaceAlarm">
              <el-form-item style="font-weight: bold;" label="已满告警阈值(%)" ref="space">
                <el-input style="width: 100px" v-model="fullSpaceAlarm"
                          :disabled="permissions!= null && permissions.indexOf('sys_diskcheck_add') <= -1 || isFirstPage"/>
                <el-button @click="setLogSpaceSettings(1)" type="primary" v-show="!isFirstPage"
                           v-if="permissions!= null && permissions.indexOf('sys_diskcheck_add') > -1">设置
                </el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row>
            <el-form ref="setStraForm" label-width="150px" :model="storeStra">
              <el-form-item style="font-weight: bold;" label="日志存储策略设置" ref="space">
                <el-select style="width: 100px" v-model="storeStra" placeholder="请选择"
                           :disabled="permissions!= null && permissions.indexOf('sys_diskcheck_add') <= -1 || isFirstPage">
                  <el-option
                      v-for="item in storeStraOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
                <el-button @click="setLogSpaceSettings(2)" type="primary" v-show="!isFirstPage"
                           v-if="(permissions!= null && permissions.indexOf('sys_diskcheck_add') > -1)">设置
                </el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row>
            <el-form ref="setStraForm" label-width="150px" :model="storeDuration">
              <el-form-item style="font-weight: bold;" label="日志保存时间(月)" ref="space">
                <el-input style="width: 100px" v-model="storeDuration"
                          :disabled="permissions!= null && permissions.indexOf('sys_diskcheck_add') <= -1 || isFirstPage"/>
                <el-button @click="setLogSpaceSettings(4)" type="primary" v-show="!isFirstPage"
                           v-if="permissions!= null && permissions.indexOf('sys_diskcheck_add') > -1">设置
                </el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row>
            <el-form ref="setStraForm" label-width="150px" :model="storePath">
              <el-form-item style="font-weight: bold;" label="日志转存路径" ref="storePath">
                <el-input style="width: 200px" v-model="storePath"
                          :disabled="permissions!= null && permissions.indexOf('sys_diskcheck_add') <= -1 || isFirstPage"/>
                <el-button @click="setLogSpaceSettings(5)" type="primary"
                           v-if="permissions!= null && permissions.indexOf('sys_diskcheck_add') > -1">设置
                </el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </div>
        <div class="center">
          <div class="center-left">
            <!--          <div >-->
            <el-row style="color: green" v-show="!this.diskInfoFullingAlarm && !this.diskInfoFulledAlarm">
              日志存储空间正常
            </el-row>
            <el-row style="color: red" v-show="this.diskInfoFullingAlarm">
              日志存储空间将满告警
            </el-row>
            <el-row style="color: red" v-show="this.diskInfoFulledAlarm">
              日志存储空间已满告警
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-dialog
          customClass="converOpearate"
          :close-on-click-modal="false"
          :visible="this.closeDialog"
          :title=this.dialogMsg
          width="600px"
          hight="600px"
          append-to-body="true"
          @close="cancelDialog()">
        <el-container>
          <el-main>
            <el-row style="color: red" v-show="this.closeDialog">
              {{this.dialogMsg}}
            </el-row>
          </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer">
          <el-button @click="exportData()" type="primary">转存</el-button>
          <el-button @click="convertData()">覆盖</el-button>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>
<script>

import diskCheckApi from "./api/diskCheck.service";

export default {
  props: {
    permissionsFrom: "",
    isFirstPage: {type: Boolean, default: false}
  },
  data() {
    return {
      storeStra: "1",
      storeDuration: "6",
      storePath: "",
      storeAlarm: "10",
      storeSize: "100",
      fullSpaceAlarm: "",
      permissions: null,
      storeAlarmOptions: [{
        value: '30',
        label: '30'
      }, {
        value: '50',
        label: '50'
      }, {
        value: '70',
        label: '70'
      }, {
        value: '90',
        label: '90'
      }],
      fullSpaceAlarmOptions: [{
        value: '30',
        label: '30'
      }, {
        value: '40',
        label: '40'
      }, {
        value: '50',
        label: '50'
      }, {
        value: '60',
        label: '60'
      }, {
        value: '70',
        label: '70'
      }, {
        value: '80',
        label: '80'
      }, {
        value: '90',
        label: '90'
      }],
      storeStraOptions: [{
        value: '1',
        label: '转存'
      }, {
        value: '2',
        label: '覆盖'
      }],
      storeDurationOptions: [{
        value: '1',
        label: '1'
      }, {
        value: '2',
        label: '2'
      }, {
        value: '3',
        label: '3'
      }, {
        value: '4',
        label: '4'
      }, {
        value: '5',
        label: '5'
      }, {
        value: '6',
        label: '6'
      }, {
        value: '7',
        label: '7'
      }, {
        value: '8',
        label: '8'
      }, {
        value: '9',
        label: '9'
      }, {
        value: '10',
        label: '10'
      }, {
        value: '11',
        label: '11'
      }, {
        value: '12',
        label: '12'
      }],
      sourceRate: [],
      diskInfoFullingAlarm: false,
      diskInfoFulledAlarm: false,
      showPage: true,
      closeDialog: false,
      dialogMsg: "",
      diskInfo: {
        diskName: null,
        totalSpace: 0,
        freeSpace: 0,
        usedSpace: 0,
        diskUnit: "",
        sourceRate: 0,
        pathUsedSpace: 0,
        overTotalSpace: 0,
        overFreeSpace: 0,
        overUsedSpace: 0,
        overSourceRate: 0,
      },
    }
  },
  created() {
  },
  mounted() {
    this.initData();
  },
  methods: {
    /**
     * 初始化图标
     */
    initChart() {
      let ref = this.$refs.diskCheck
      if (ref && ref !== undefined) {
        var myChart = this.$echarts.init(this.$refs.diskCheck);
        myChart.setOption({
          title: {
            text: '日志磁盘空间利用率',//主标题
            // subtext: this.diskInfo.diskName,//副标题
            x: 'center',//x轴方向对齐方式
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            bottom: 'bottom',
            data: ['已使用', '未使用']
          },
          series: [
            {
              name: '日志磁盘空间利用率',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: this.sourceRate,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0.5)'
                }
              }
            }
          ]
        });
      }
    },

    /**
     * 初始化数据
     */
    initData() {
      if (null != this.permissionsFrom) {
        this.permissions = this.permissionsFrom;
      } else {
        this.permissions = JSON.parse(sessionStorage.getItem("permissions"));
      }
      /**
       * 获取磁盘使用率
       */
      diskCheckApi.sourceRate().then((res) => {
        this.sourceRate = res.data;
        this.initChart();
      }),
        /**
         *获取磁盘信息
         */
        diskCheckApi.dickInfo().then((res) => {
          console.log(res.data)
          this.diskInfo = res.data;
          let pathUsedSpace = this.diskInfo.pathUsedSpace;
          if (pathUsedSpace / 1024 / 1024 / 1024 > 1) {
            this.diskInfo.pathUsedSpaceShow = (pathUsedSpace / 1024 / 1024 / 1024).toFixed(2);
            this.diskInfo.pathUsedSpaceUnit = "GB";
          } else if (pathUsedSpace / 1024 / 1024 > 1) {
            this.diskInfo.pathUsedSpaceShow = (pathUsedSpace / 1024 / 1024).toFixed(2);
            this.diskInfo.pathUsedSpaceUnit = "MB";
          } else if (pathUsedSpace / 1024 > 1) {
            this.diskInfo.pathUsedSpaceShow = (pathUsedSpace / 1024).toFixed(2);
            this.diskInfo.pathUsedSpaceUnit = "KB";
          }
          /**
           * 获取日志告警设置信息
           */
          diskCheckApi.getLogSpaceSettings().then((res) => {
            if (res.data) {
              this.storeStra = res.data.storeStra;
              this.storeAlarm = res.data.storeAlarm;
              this.fullSpaceAlarm = res.data.fullSpaceAlarm;
              this.storePath = res.data.storePath;
              this.storeDuration = res.data.storeDuration;
              this.storeSize = res.data.storeSize;
              //日志将满告警
              let rate = this.diskInfo.sourceRate;
              console.log(rate)
              //日志将满告警
              if (rate >= 100 || rate >= this.fullSpaceAlarm) {
                //已满告警
                this.diskInfoFulledAlarm = true;
                this.diskInfoFullingAlarm = true;
                this.showPage = false;
                this.closeDialog = true;
                this.dialogMsg = "日志存储空间已满告警";
                //是否开启磁盘已满告警
                if (!PUZZLE_CONFIG.diskFullAlarmOpen) {
                  this.showPage = true;
                  // this.closeDialog = false;
                }
                this.diskInfoFullingAlarm = false;
              } else if (rate < 100 && rate >= res.data.storeAlarm) {
                //将满告警
                this.closeDialog = true;
                this.dialogMsg = "日志存储空间将满告警";
                this.diskInfoFullingAlarm = true;
                this.diskInfoFulledAlarm = false;
              } else {
                //空间正常
                this.diskInfoFulledAlarm = false;
                this.diskInfoFullingAlarm = false;
              }
            }
          })
        })
    },

    /**
     * 关闭日志空间已满弹窗
     * @date 2020-01-07
     */
    cancelDialog() {
      this.closeDialog = false;
    },

    /**
     * 转存
     */
    exportData() {
      diskCheckApi.exportData().then((res) => {
        if (res.code === 10200) {
          this.closeDialog = false;
          this.$message.success(res.data);
        } else {
          this.$message.error(res.data);
        }
      })
    },

    /**
     * 覆盖
     */
    convertData() {
      diskCheckApi.convertData().then((res) => {
        if (res.code === 10200) {
          this.closeDialog = false;
          this.$message.success(res.data);
        } else {
          this.$message.error(res.data);
        }
      })
    },

    /**
     * 设置日志存储数据
     */
    setLogSpaceSettings(type) {
      let obj = "";
      //已满告警阈值
      if (type === 1) {
        if (parseFloat(this.fullSpaceAlarm) < parseFloat(this.storeAlarm)) {
          this.$message.error("已满空间阈值不能小于将满空间阈值！");
          return;
        } else {
          if (isNaN(this.fullSpaceAlarm) || this.fullSpaceAlarm <= 0 || this.fullSpaceAlarm >= 101 || !(/^\d+$/.test(this.fullSpaceAlarm))) {
            this.$message.error('请输入正确的数值,只允许输入小于等于100的正整数!');
            return;
          }
          obj = Object.assign({
            fullSpaceAlarm: this.fullSpaceAlarm
          }, obj)
        }
      }
      //存储策略
      if (type === 2) {
        obj = Object.assign({
          storeStra: this.storeStra
        }, obj)
      }
      //将满告警阈值
      if (type === 3) {
        if (parseFloat(this.storeAlarm) > parseFloat(this.fullSpaceAlarm)) {
          this.$message.error("将满空间阈值不能大于已满空间阈值！");
          return;
        } else {
          if (isNaN(this.storeAlarm) || this.storeAlarm <= 0 || this.storeAlarm >= 101 || !(/^\d+$/.test(this.storeAlarm))) {
            this.$message.error('请输入正确的数值,只允许输入小于等于100的正整数!');
            return;
          }
          obj = Object.assign({
            storeAlarm: this.storeAlarm
          }, obj)
        }
      }
      //日志转存时间
      if (type === 4) {
        if (!this.storeDuration) {
          this.$message.error("日志保存时间不能为空！");
        } else {
          if (this.storeDuration < 3 || !(/^\d+$/.test(this.storeDuration))) {
            this.$message.error('请输入正确的数值,只允许输入大于等于3的正整数!');
            return;
          }
          obj = Object.assign({
            storeDuration: this.storeDuration
          }, obj)
        }
      }
      //日志转存路径
      if (type === 5) {
        if (!this.storePath) {
          this.$message.error("日志转存路径不能为空！");
        } else {
          obj = Object.assign({
            storePath: this.storePath
          }, obj)
        }

      }
      //日志存储空间
      if (type === 6) {
        if (!this.storeSize) {
          this.$message.error("存储空间不能为空！");
        } else if (this.storeSize <= 0 || !(/^\d+$/.test(this.storeSize))) {
          this.$message.error('请输入正确的数值,只允许输入大于0的正整数!');
          return;
        } else if (parseFloat(this.storeSize) < parseFloat(this.diskInfo.usedSpace)) {
          this.$message.error("存储空间不能小于磁盘已使用空间！");
          return;
        } else if (parseFloat(this.storeSize) > parseFloat(this.diskInfo.totalSpace)) {
          this.$message.error("存储空间不能大于磁盘空间最大值！");
          return;
        } else {
          obj = Object.assign({
            storeSize: this.storeSize
          }, obj)
        }
      }
      diskCheckApi.setLogSpaceSettings(obj).then((res) => {
        if (res.code === 10200) {
          this.initData();
          this.$message.success('设置成功！');
        }
      })
    }

  }
}

</script>
<style lang="less" scoped>
  .all-content-echart {
    display: flex;
    margin-top: 16px;
    height: 630px;

    .left {
      display: inline-block;
      width: 60%;
      border: 1px solid #f0f0f0;
      padding: 10px;
    }

    .right {
      .el-row {
        margin-top: 5px;
      }

      .top {
        width: 80%;
        height: 20%;
        border: 1px solid #f0f0f0;
        padding: 10px 0 0 20px;

        .bold {
          font-weight: bold;
        }
      }

      .center {
        display: flex;
        width: 80%;
        height: 15%;
        border: 1px solid #f0f0f0;
        padding: 10px;

        .center-left {
          width: 100%;
          border: 1px solid #f0f0f0;
          padding: 2% 2% 2% 2%;;
          font-size: large;
          font-weight: bold;
        }

        .center-right {
          width: 100%;
          border: 1px solid #f0f0f0;
          padding: 12%;
        }
      }

      .bottom {
        width: 80%;
        height: 65%;
        border: 1px solid #f0f0f0;
        padding: 0 10% 2% 2%;

        .el-button {
          margin-left: 20px;
        }
      }

      display: inline-block;
      width: 40%;
    }

  }

</style>
